<template>
	<view class="page-cont" :style="themeStore.theme">
		<navbar title="修改手机号"></navbar>
		<view class="main-cont" :style="{height: pageHeight}">
			<view class="form-box">
				<uni-forms v-if="current == 0" ref="oldForm" :value="formData" :rules="rules" labelPosition="top" labelWidth="200">
					<uni-forms-item label="原手机号" name="telephone" required>
						<uni-easyinput v-model="formData.telephone" type="number" maxlength="11" clearable placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="oldCode" required>
						<uni-easyinput v-model="formData.oldCode" maxlength="4" clearable placeholder="请输入" />
						<view class="code" @click="handleCode">{{count == 60 ? '获取验证码' : count + 's'}}</view>
					</uni-forms-item>
				</uni-forms>
				<uni-forms v-if="current == 1" ref="newForm" :value="formData" :rules="rules" labelPosition="top" labelWidth="200">
					<uni-forms-item label="新手机号" name="mobile" required>
						<uni-easyinput v-model="formData.mobile" type="number" maxlength="11" clearable placeholder="请输入" />
					</uni-forms-item>
					<uni-forms-item label="验证码" name="code" required>
						<uni-easyinput v-model="formData.code" maxlength="4" clearable placeholder="请输入" />
						<view class="code" @click="handleCode">{{count == 60 ? '获取验证码' : count + 's'}}</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="form-btn" @click="handleSubmit">{{current == 1 ? '确定' : '下一步'}}</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, watch } from 'vue';
	import { onShow, onLoad, onUnload } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import useThemeStore from '@/store/theme';
	import useUserStore from '@/store/user';
	import { bindMobile, changeMobile } from "@/api/login.js";
	const themeStore = useThemeStore();
	const userStore = useUserStore();
	const { pageHeight } = useNavbar();
	const { themeList } = storeToRefs(themeStore);
	const { userInfo } = storeToRefs(userStore);
	const oldForm = ref(null)
	const newForm = ref(null)
	const timer = ref(null)
	const current = ref(0)
	const count = ref(60)
	const formData = reactive({
		telephone: '',//原手机号
		oldCode: '',//验证码
		code: '',//验证码
		mobile: '',//新手机号
	});
	const rules = reactive({
		telephone: {
			rules: [{
				required: true,
				errorMessage: "请输入原手机号",
			},],
		},
		mobile: {
			rules: [{
				required: true,
				errorMessage: "请输入新手机号",
			},],
		},
		oldCode: {
			rules: [{
				required: true,
				errorMessage: "请输入验证码",
			},],
		},
		code: {
			rules: [{
				required: true,
				errorMessage: "请输入验证码",
			},],
		},
	})

	watch(() => count.value, (val) => {
		if (val == 0) {
			clearInterval(timer.value);
			count.value = 60;
		}
	});

	onUnload(() => {
		if (timer.value) {
			clearInterval(timer.value);
		}
	});

	// 发送验证码
	function getMobileCode() {
		changeMobile({
			telephone: current.value == 1 ? formData.mobile : formData.telephone,
			type: 1,
		}).then(() => {
			count.value = 60;
			timer.value = setInterval(() => {
				count.value--;
			}, 1000)
			uni.showToast({
				title: '验证码已发送至您的手机，请注意查收',
				icon: 'none'
			});
		})
	}

	// 获取验证码
	function handleCode() {
		let phone = current.value == 1 ? formData.mobile : formData.telephone;
		if (!checkPhone(phone)) {
			return;
		}
		getMobileCode();
	}

	// 确定
	function handleSubmit() {
		if (current.value == 0) {
			// 下一步
			oldForm.value.validate().then((valid = false) => {
				if (valid && checkPhone(formData.telephone) && checkCode(formData.oldCode)) {
					current.value = 1;
					count.value = 60;
					clearInterval(timer.value);
				}
			});
		} else {
			// 确定
			newForm.value.validate().then((valid = false) => {
				if (valid && checkPhone(formData.mobile) && checkCode(formData.code)) {
					let params = {
						mobilecode: formData.telephone + '_' + formData.oldCode + '@' + formData.mobile +
							'_' + formData.code,
						mobile: formData.mobile,
						code: formData.code, // 新的验证码
						id: userInfo.value.id //用户id
					}
					changeMobile(params).then(() => {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
					})
				}
			});
		}
	}

	// 校验手机号码
	function checkPhone(mobile) {
		const reg = /^1\d{10}$/;
		if (!mobile.length) {
			uni.showToast({
				title: '手机号码不能为空',
				icon: 'none'
			});
			return false;
		}
		if (!reg.test(mobile)) {
			uni.showToast({
				title: '手机号码格式不正确',
				icon: 'none'
			});
			return false;
		}
		return true;
	}

	function checkCode(code) {
		if (!code.length) {
			uni.showToast({
				title: '验证码不能为空',
				icon: 'none'
			});
			return false;
		}
		if (code.length != 4) {
			uni.showToast({
				title: '验证码格式不正确',
				icon: 'none'
			});
			return false;
		}
		return true;
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		position: relative;

		.main-cont {
			padding: 10px;
			background: linear-gradient(135deg, rgba(229, 233, 246, 1) 0%, rgba(229, 240, 248, 1) 26.08%, rgba(230, 236, 249, 1) 72.48%, rgba(243, 249, 250, 1) 100%);
			overflow: hidden;
			overflow-y: auto;
		}

		.form-box {
			padding: 20px;
			border-radius: 10px;
			background-color: #fff;
		}

		.form-btn {
			margin-top: 30px;
			height: 40px;
			line-height: 40px;
			color: #fff;
			text-align: center;
			border-radius: 10px;
			background-color: $theme-color;
		}
	}

	::v-deep .uni-forms-item {
		margin-bottom: 10px;
	}

	::v-deep .uni-forms-item__content {
		display: flex;
	}

	.code {
		width: 100px;
		color: $theme-color;
		font-size: 14px;
		font-weight: 600;
		text-align: center;
		line-height: 35px;
	}
</style>